<!-- Fenetre modal pour demander si on veut créer un nouveau planning type -->
<?php
$planning	 = $this->planning;
$sites		 = $this->sites;
//var_dump($planning);
?>
<div>
    <form id="yes-no" action="#" method="post" class="pl-form">

	<div style='width: 99%; margin-top: 0.7em'>
	    <h6 style='text-align: center; display: block; width: 99%; background: #e4e1dd;'>Sites</h6>
	    <select id='site' name='site' style='width: 99%' class='pl-select'>
		<?php foreach ($sites as $site): ?>
		    <?php if ((int) $site->id == 0) continue; ?>
    		<option value='<?php echo $site->id ?>'><?php echo $site->libelle ?></option>
		<?php endforeach ?>
	    </select>
	</div>

	<h6 style='text-align: center; width: 99%; background: #e4e1dd;'>Créer un Planning Type</h6>

	<label class="pl-label empl-full vert-olive" id='empty'>
	    <span style='text-align: center'>1 - Selon un Planning Type Vide</span>
	</label>

	<div style='width: 3em; margin: auto;'>Ou</div>

	<label class="pl-label empl-full bleu" id='dispo'>
	    <span style='text-align: center'>2 - Selon les Disponibilités</span>
	</label>

	<div style='width: 3em; margin: auto;'>Ou</div>

	<label class="pl-label empl-full beige" id='other'>
	    <span style='text-align: center'>3 - Selon un Autre Planning Type</span>
	</label>
	<div id='templates' style='display: none; width: 99%; margin-top: 0.7em'>
	    <span style='text-align: center; display: block; width: 99%'>Planning à copier</span><br>
	    <select id='planning' name='pl_num' style='width: 99%' class='pl-select'>
		<?php foreach ($planning as $pl): ?>
                <!--option value='<?php echo $pl->template ?>'><?php echo $pl->pl_libelle ?></option-->
		<?php endforeach ?>
	    </select>
	</div>
	<input type="hidden" id='choice' name="choice" value="empty">
	<hr>
	<div>
	    <button type='submit' class='btn btn-success validation' style='visibility: hidden' onclick='return validate(true);' style='float: right; margin: 5px'>Créer la Copie</button>
	    <button type='button' class='btn btn-inverse annulation' onclick='return validate(false);' style='float: right; margin: 5px'>Annuler</button>
	</div>
    </form>
</div>
<script type='text/javascript'>
		$(document).ready(function() {
		    // Chargment des planning type pour le site
		    site = 1;
		    ajax = $.ajax({
			type: 'post',
			url: "<?php echo $this->url('RHX/default', array('controller'	 => 'template', 'action'	 => 'templatetypelist')) ?>/" + site
		    });
		    ajax.success(function(data) {
			$('#planning').html(data);
		    });
		    ajax.error(function() {
			$('.validation').click(function(event) {
			    event.preventDefault();
			    return false;
			});
		    });
		    // Autre
		    $('#other').click(function() {
			$('#templates').show('slow');
			$('#choice').val('other');
			$('.pl-selected').removeClass('pl-selected');
			$(this).addClass('pl-selected');
			$('.validation').css('visibility', 'visible');
		    });
		    // Vide
		    $('#empty').click(function() {
			$('#templates').hide('slow');
			$('#choice').val('empty');
			$('.pl-selected').removeClass('pl-selected');
			$(this).addClass('pl-selected');
			validate(true);
		    });
		    // Dispo
		    $('#dispo').click(function() {
			$('#templates').hide('slow');
			$('#choice').val('dispo');
			$('.pl-selected').removeClass('pl-selected');
			$(this).addClass('pl-selected');
			validate(true);
		    });
		    // Sélection Site
		    $('#site').change(function() {
			// Si l'option change, la liste des plannings type change de même
			site = $('#site option:selected').val();
			ajax = $.ajax({
			    type: 'post',
			    url: "<?php echo $this->url('RHX/default', array('controller'	 => 'template', 'action'	 => 'templatetypelist')) ?>/" + site
			});
			ajax.success(function(data) {
			    $('#planning').html(data);
			});
			ajax.error(function() {
			    $('.validation').click(function(event) {
				event.preventDefault();
				return false;
			    });
			});
		    });
		});

		function validate(value)
		{
		    if (!value) {
			$('#pl-dialog').dialog('close');
			return false;
		    }

		    // OUverture d'un autre pop up
		    choice = $('#choice').val();
		    if (choice === 'other') {
			// Other Ajax
			action = 'addother';
			id = $('#planning option:selected').val();
			url = "<?php echo $this->url('RHX/default', array('controller' => 'template')) ?>/" + action + '/' + id;
		    } else {
			if (choice === 'dispo') {
			    // Dispo Ajax
			    action = 'adddispo';
			    url = "<?php echo $this->url('RHX/default', array('controller' => 'template')) ?>/" + action;
			} else {
			    // Empty Ajax
			    action = 'addempty';
			    url = "<?php echo $this->url('RHX/default', array('controller' => 'template')) ?>/" + action;
			}
		    }
		    site = $('#site option:selected').val();
		    formData = '&site_id=' + site;
		    if (choice == 'other') {
			formData += "&pl_num=" + $('#planning option:selected').val();
		    }
		    siteLibelle = $('#site option:selected').text();
		    $('#pl-dialog').dialog('close');
		    ajax = $.ajax({
			type: 'post',
			url: url,
			data: formData
		    });
		    ajax.success(function(data) {
			var w = parseInt($('body').css('width'));
			var h = parseInt($('body').css('height'));
			if (h < 600)
			    h = 620;
			$('#pl-dialog').html(data).dialog({
			    width: w - 50,
			    height: h - 20,
			    title: "Nouveau Planning Type du Site " + siteLibelle,
			    autoOpen: true,
			    modal: true,
			    show: {effect: 'fade', duration: 1000},
			    hide: {effect: 'fade', duration: 700}
			});
		    });
		    ajax.error(function() {
			alert('Erreur');
		    });
		    return false;
		}
</script>

<style type="text/css">
    .pl-selected{
	border: solid 2px #000;
	background: #afffbe;
    }
    .pl-select{
	border: solid 1px #ff3333;
    }
    .pl-label:hover{
	box-shadow: 0px 0px 7px 0px #7f7f7f;
    }
</style>